<template>
	<view>
		<view class="top-swiper">
			 <view class="box">
			 	<swiper class="swiper" previous-margin="52rpx" next-margin='40rpx' :current="swiper.index"  @change="swiperChange" >
			 		<swiper-item v-for="(item,index) in data" :key="index" >
			 			<view class='le market-card' :class="{'le-active':swiper.class == index}" :style="{backgroundImage: `url(${item.icon_image}`}">
							<view style="position:absolute;bottom: 50rpx;left:40rpx;font-size:32rpx;font-weight:500;color:#FFF;width:300rpx;" v-if="item.if_more_than == 1">
								{{$t('member.upgraded')}}
							</view>
							<view style="background:#FFF;position:absolute;bottom: 80rpx;left:28rpx;font-size:32rpx;font-weight:500;color:#FFF;width:360rpx;height:10rpx" v-else>
								<view style="background:#FFDE6B;height: 100%;" :style="{width: userInfo.money/item.become_balance*360 + 'rpx'}"></view>
								<view style="background:#FFDE6B;width: 18rpx;height: 18rpx;position:absolute;top: -4rpx;border-radius:50%;"
								:style="{left: userInfo.money/item.become_balance*360 + 'rpx'}"></view>
								<view style="margin-top: 8rpx;color:#FFF;font-size: 24rpx;">{{$t('new.accountbalance') + ' ' + userInfo.money + '/' + item.become_balance}}</view>
							</view>
							<view @click="updateClick(item)" :style="{opacity:item.if_more_than == 1?0.2:1,backgroundColor: bg[parseInt(item.level)]}" style="border-radius:35rpx;height:70rpx;line-height:70rpx;width:210rpx;text-align:center;position:absolute;bottom: 40rpx;right:40rpx;font-size:28rpx;font-weight:400;color:#FFF;">
								{{$t('new.upgradenow')}}
							</view>
                         </view>
			 		</swiper-item>
			 	</swiper> 
			 </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiper: {
					margin: "10rpx",
					index: 0,
					class:0,
				},
				bg: ['#000','#7289B3','#E38933','#4A99E6','#D66A56','#B6795B', '#5D71AE', '#AF8239', '#6A54E5', '#FF9200', '#3E342B', '#00BD4F', '#FF230F'],
				color: ['#000','#7289B3','#E38933','#4A99E6','#D66A56','#B6795B', '#5D71AE', '#AF8239', '#6A54E5', '#FF9200', '#3E342B', '#00BD4F', '#FF230F']
			}
		},
        props: {
			current: {
				type: Number,
				default: 0
			},
			data: {
				type: Array,
				default: []
			}
        },
		components: {

		},
		computed: {
			userInfo() {
				return this.$store.getters.userInfo || {}
			}
		},
		mounted() {
			this.swiper.index = this.current;
			this.swiper.class = this.current;
		},
		methods: {
			//swiper滑动事件
			swiperChange: function(e) {
				this.swiper.class=e.detail.current
				// if(e.detail.current==this.config.length-1){
				// 	this.swiper.index = e.detail.current-1;
				// }else{
				// 	this.swiper.index = e.detail.current;
				// }
                this.$emit('swiperChange', e.detail.current);
			},
			onItemClick(val) {
				this.$emit('swiperChange', val);
				this.swiper.class=val
				if(val==this.config.length-1){
					this.swiper.index = val-1;
				}else{
					this.swiper.index = val;
				}
			},
			confirmClick() {
				this.$emit('confirmClick');
			},
			updateClick(val) {
				if (val.if_more_than == 1) {
					return;
				}
				this.$emit('updateClick')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top-swiper{
		.box{
			box-sizing: content-box;
			z-index: 5;
			top: 0;
			left: 0;
			width: 100%;
			height: auto;
		}
		
		.swiper {
			height: 340rpx;
			margin: 0 0 0 0rpx;

            .market-card {
				background-size: 100% 100%;
				background-repeat: no-repeat;
                width: 660rpx;
                height: 340rpx;
				image {
					width: 100%;
					height: 100%;
				}
            }
		
			.le {
				color: #818FA9;
				display: block;
				transform: scale(0.92);
				transform-origin: center bottom;
				transition: all 0.3s ease-in-out 0s;
				border-radius: 4px;
		
				&.le-active {
					color: #1C2841;
					transform: scale(1);
				}
			}
		
		}
	}
    .description {
        color: #C2A277;
        font-size: 24rpx;
        &-point {
            width: 7px;height: 7px;border: 1px solid #C2A277;border-radius: 50%;opacity: 1;margin-right:10rpx;
        }
    }
	
</style>